<!--
  功能：功能描述
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年12月15日 14:23:54
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
    <el-card class="card-linechart">
        <div id="linechart"></div>
    </el-card>
</template>

<script>
    import * as echarts from 'echarts'
    import request from "@/utils/request";

    var option = {
        title: {
            text: '全国疫情新增趋势',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            right: '20px',
            data: ['确诊', '疑似'],
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
        },
        yAxis: {
            type: 'value',
            data: ['0', '20', '40', '60', '80', '100', '120', '140'],
        },
        series: [
            {
                name: '确诊',
                type: 'line',
                data: [],
            },
            {
                name: '疑似',
                type: 'line',
                data: [],
            },
        ],
    }
    export default {
        // 组件名称
        name: 'LineChart',
        // 组件参数 接收来自父组件的数据
        props: {},
        // 组件状态值
        data() {
            return {
                chinaDayList: [],
            }
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 以下是生命周期钩子
        /**
         * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
         */
        created() {
        },
        /**
         * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
         * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
         */
        mounted() {
            this.getData()
            this.myChart = echarts.init(document.getElementById('linechart'))
            this.myChart.setOption(option)
        },
        // 组件方法
        methods: {
            getData() {
                request.get("/other/getOtherData", {
                    params: {
                        url: 'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
                    }
                }).then(data => {
                    this.chinaDayList = data.data.data.chinaDayList
                    option.series[0].data = []
                    option.series[1].data = []
                    option.xAxis.data = []
                    this.chinaDayList.forEach((item, index) => {
                        option.xAxis.data.push(item.date)
                        option.series[0].data.push(item.today.confirm)
                        option.series[1].data.push(item.today.suspect)
                    })
                    this.myChart.setOption(option)
                })

            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
    .card-linechart {
        float: left;
        width: 500px;
    }

    #linechart {
        width: 100%;
        height: 400px;
    }
</style>
